<template>
    <el-skeleton animated :loading="loading" :rows="10">
    <div>
        <el-row class="row-bg" id="k1">
            <el-col :span="8">
                <el-button style="display: flex;float: left;margin-left: 10px;" type="primary" size="small"
                    @click="xz">新增</el-button>
            </el-col>
            <el-col :span="8">
                <el-input v-model="input" placeholder="输入配置名查询" @input="handlerChange" class="input-with-select">
                    <template #append>
                        <el-button circle>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="6">
                    </el-col>
                    <el-col :span="6">
                    </el-col>
                    <el-col :span="6">
                    </el-col>
                    <el-col :span="6">
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
    <div style="margin-top: 20px;">
        <el-table :data="tableData" v-loading="loadingshow" stripe style="width: 100%" border>
            <el-table-column prop="id" v-if="false" label="编号" width="" />
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column prop="name" label="配置名" />
            <el-table-column prop="count" label="权限数" width="" />
            <el-table-column prop="orgs" label="适用组织" width="">
                <template #default="scope">
                                    <el-tag style="margin: 2px;" :key="children.id"
                                        v-for="children in scope.row.orgs">{{ children.name }}
                                    </el-tag>
                                </template>
            </el-table-column>
            <el-table-column prop="isPublish" label="发布" width="">
                <template #default="scope">
                <el-tag type="success" v-if="scope.row.isPublish==1">
                    是
                </el-tag>
                <el-tag v-else>
                    否
                </el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="isBan" label="禁用" width="">
                <template #default="scope">
                <el-tag type="success" v-if="scope.row.isBan==0">
                    否
                </el-tag>
                <el-tag type="danger" v-else>
                    是
                </el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" width="" />
            <el-table-column prop="address" label="操作" width="220">
                <template #default="scope">
                                    <el-button size="small" type="primary" @click="info(scope.row)">详情
                                    </el-button>
                                    <template v-if="(scope.row.isBan == 0&&scope.row.isPublish==1)" >
                                        <el-popconfirm  confirm-button-text="Yes" cancel-button-text="No"
                                            icon="el-icon-info" icon-color="red" title="确认禁用该数据吗？"
                                            @confirm="jy(scope.row)">
                                            <template #reference>
                                            <el-button style="margin-left:10px" type="danger"
                                                size="small"> 禁用 </el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                    <template v-if="(scope.row.isBan == 0&&scope.row.isPublish==0)">
                                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                                            icon="el-icon-info" icon-color="red" title="确认发布该数据吗？"
                                            @confirm="fb(scope.row)">
                                            <template #reference>
                                            <el-button style="margin-left:10px" type="warning" plain
                                                size="small">发布</el-button>
                                            </template>
                                        </el-popconfirm>
                                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                                            icon="el-icon-info" icon-color="red" title="确认删除该数据吗？"
                                            @confirm="del(scope.row)">
                                            <template #reference>
                                            <el-button  style="margin-left:10px" type="danger" plain
                                                size="small">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                        
                                    </template>
                                    <template v-if="(scope.row.isBan == 1)">
                                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                                            icon="el-icon-info" icon-color="red" title="确认启用该数据吗？"
                                            @confirm="qy(scope.row)">
                                            <template #reference>
                                            <el-button style="margin-left:10px"  type="success"
                                                size="small">启用</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </template>
            </el-table-column>
        </el-table>
        <div id="k2">
            <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</el-skeleton>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {getRightConfigs,PublishRightConfig,BanRightConfig,deleteRightConfigs} from '../../../api/Right/config/index'
import router from '@/router'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const data=reactive({
            tableData:[],//表格数据
            loadingshow:false,//表格加载
            loading:true,//骨架屏加载
            page:1,//当前页
            limit:10,//每页数
            total:0,//总条数
            input:'',
            key:'',
            isBan:'',//是否禁用
            isPublish:''//是否发布
        })

        const events={
            //数据
            getdata(key:any,isBan:any,isPublish:any){
                getRightConfigs({
                    page:data.page,
                    limit:data.limit,
                    key:key,
                    isBan:isBan,
                    isPublish:isPublish
                }).then((res:any)=>{
                    if(res.result==0){
                        data.total=res.data.total
                        data.tableData=res.data.data
                        data.loadingshow=false
                        data.loading=false
                    }
                })
            },
             //分页
             handleSizeChange(val: any) {
                data.limit = val
                events.getdata(data.key,data.isBan,data.isPublish);
                data.loadingshow = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata(data.key,data.isBan,data.isPublish);
                data.loadingshow = true;
            },
            handlerChange(e:any){
                data.loadingshow = true;
            data.key = e;
            events.getdata(data.key, data.isBan, data.isPublish);
            if (!e) {
                data.key = "";
                events.getdata(data.key, data.isBan, data.isPublish);
            }
            },
            //详情
            info(obj: any) {
                data.loadingshow = true
                setTimeout(() => {
                    data.loadingshow = false
                    router.push("/right/config/detail?id=" + obj.id)
                }, 1500)
            },
            xz(){
                router.push('/right/config/add')
            },
            //禁用
            jy(obj:any,val=1){
                data.loadingshow = true;
                BanRightConfig({
                ids: [obj.id],
                isBan: val
            }).then((res:any) => {
                console.log("-----------", res);
                if (res.result === 0) {
                    events.getdata(data.key, data.isBan, data.isPublish);
                    ElMessage({
                        message: '操作成功',
                        type: 'success'
                    });
                    data.loadingshow=false
                } else {
                    events.getdata(data.key, data.isBan, data.isPublish);
                    ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                }
            })
            },
            //发布
            fb(obj:any,val=1){
                data.loadingshow = true;
                PublishRightConfig({
                ids: [obj.id],
                isBan: val
            }).then((res:any) => {
                console.log("-----------", res);
                if (res.result === 0) {
                    events.getdata(data.key, data.isBan, data.isPublish);
                    ElMessage({
                        message: '操作成功',
                        type: 'success'
                    });
                    data.loadingshow=false
                } else {
                    events.getdata(data.key, data.isBan, data.isPublish);
                    ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                }
            })
            },
            //删除
            del(obj:any){
                data.loadingshow = true;
                deleteRightConfigs({
                    ids: [obj.id]
                }).then((res: any) => {
                    if (res.result === 0) {
                        events.getdata(data.key,data.isBan,data.isPublish);
                        ElMessage({
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        data.loadingshow = false;
                        ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            },
            //启用
            qy(obj:any){
                events.jy(obj,0)
            }
        }

        onMounted(()=>{
            events.getdata(data.key,data.isBan,data.isPublish)
        })

        return{
            ...toRefs(data),
            ...events
        }
    },
})
</script>
<style>
#k1 {
    margin-left: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#k2 {
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
</style>
